import {Component, ComponentRef, HostListener, OnInit, ViewContainerRef, ViewEncapsulation} from '@angular/core';
import {AppService} from "../../../../app.service";
import {animate, AnimationBuilder, state, style, transition, trigger} from "@angular/animations";
import {fromEvent} from "rxjs";
import {GlobalEvent} from "../../../../support/event.definition";
import {AppComponent} from "../../../../app.component";
import {LoadComponent} from "../../../../support/annotation";

@Component({
  selector: '.ss-platform-notice-wraper',
  templateUrl: './notice.component.html',
  styleUrls: ['./notice.component.scss'],
  animations: [
    trigger("animation", [
      state('void', style({transform: 'translate3d(0px,0,0)'})),
      state('*', style({transform: 'translate3d(-320px,0,0)'})),
      transition("void <=> *", animate(200))
    ])
  ],
  encapsulation: ViewEncapsulation.None,
  host: {"[@animation]": ""}
})
@LoadComponent(GlobalEvent.ShowSidebarNotice)
export class NoticeComponent implements OnInit {

  constructor(public $app: AppService) {
  }

  ngOnInit(): void {
    this.$app.publish(GlobalEvent.ShowMask);
    setTimeout(() => {
      let unSubscription = fromEvent(window, "click").subscribe(() => {
        this.$app.publish(GlobalEvent.HideMask);
        this.$app.publish(GlobalEvent.HideSidebar);
        unSubscription.unsubscribe();
      })
    });
  }

  @HostListener("click", ["$event"])
  click($event: MouseEvent): void {
    $event.stopPropagation();
  }

}
